<template>
  <page class="create-business">
    <v-back />
    <div class="form-group">
      <van-cell-group>
        <van-field size="large" name="radio" label="主体类型">
          <div slot="label" class="label">
            <span>主体类型</span>
            <i class="required">*</i>
          </div>
          <template #input>
            <van-radio-group v-model="params.type" direction="horizontal">
              <van-radio name="0">个人</van-radio>
              <van-radio name="1">企业</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
          size="large"
          v-model="params.name"
          placeholder="请输入客户姓名"
        >
          <div slot="label" class="label">
            <span>您的姓名</span>
            <i class="required">*</i>
          </div>
        </van-field>
        <van-field
          size="large"
          v-model="params.phone"
          placeholder="请输入联系电话"
        >
          <div slot="label" class="label">
            <span>联系电话</span>
            <i class="required">*</i>
          </div>
        </van-field>
        <van-field size="large" right-icon="arrow">
          <div slot="label" class="label">
            <span>所在城市</span>
            <i class="required">*</i>
          </div>
          <input
            type="text"
            slot="input"
            class="input"
            placeholder="所在城市"
            readonly
            @click="showArea = true"
            style="flex: 1"
            :value="params.city"
          />
        </van-field>
        <van-field
          size="large"
          v-model="params.wantAmount"
          placeholder="请输入贷款金额"
        >
          <div slot="label" class="label">
            <span>贷款金额</span>
            <i class="required">*</i>
          </div>
        </van-field>
        <van-field
          size="large"
          v-model="params.purpose"
          placeholder="请输入贷款目的"
        >
          <div slot="label" class="label">
            <span>贷款目的</span>
            <i class="required">*</i>
          </div>
        </van-field>
      </van-cell-group>
    </div>
    <a href="javascript: void (0);" class="a-btn" @click="submit"
      >提交贷款申请</a
    >

    <v-addcity
      :show="showArea"
      @cancel="cancel"
      @confirm="confirmAddress"
    ></v-addcity>

    <van-dialog
      v-model="showQRcode"
      className="showQRCode-modal"
      :showConfirmButton="false"
    >
      <div class="showQRCode">
        <div class="img-group">
          <img :src="showImg(qrImgUrl)" />
        </div>
        <van-icon name="close" @click="closeModal" />
      </div>
    </van-dialog>
  </page>
</template>

<script>
import AutoComplete from "@/components/autoComplete.vue";
// import ChangeCell from '@/components/changeCell.vue'
import vAddcity from "@/components/addcity.vue";
// import { mapGetters } from 'vuex'
export default {
  components: { AutoComplete, vAddcity },
  // components: {AutoComplete,ChangeCell,vAddress},
  // computed: {...mapGetters(['wxInfo','system','userInfo'])},
  data() {
    return {
      number: "",
      company: "",
      provinceName: "",
      cityName: "",
      countryName: "",
      showArea: false,
      showQRcode: false,
      qrImgUrl: "",
      params: {
        companyKeyNo: "382498f2b5857f6c99dc3cf9d530f0f4",
        customerPccCityId: null,
        customerPccCountryId: null,
        customerPccProvinceId: null,
        customerRealName: "",
      },
    };
  },
  methods: {
    //修改手机号
    changeTel() {
      this.$router.push("/validate");
    },
    //选择公司
    chooseCompany(item, data) {
      this.company = item.name;
      this.number = data.creditCode;
      this.params.companyKeyNo = data.keyNo;
    },

    //选择地址
    cancel() {
      this.showArea = false;
    },

    confirmAddress(area) {
      // console.log(area);
      //   this.params.customerPccProvinceId = area[0].id;
      //   this.provinceName = area[0].name;
      this.params.cityId = area[1].id;
      this.params.city = area[1].name;
      // this.params.customerPccCountryId = area[2].id;
      // this.countryName = area[2].name;
      this.cancel();
    },

    async submit() {
      // if (!this.params.customerRealName) {
      //   return this.$toast.error("请输入姓名");
      // } else if (!this.params.companyKeyNo) {
      //   return this.$toast.error("请选择企业");
      // } else if (!this.params.customerPccCountryId) {
      //   return this.$toast.error("请选择地址");
      // }

      this.$loading();
      try {
        const res = await this.$http.post(`/Clue/productAdd`, {
          ...this.params,
          ...{ relProductId: this.$route.params.id },
        });
        // 跳转到首页
        if (res.code != "200")
          return this.$toast.error(res.msg);
        this.$toast.success('提交成功');
        setTimeout((_) => {
          this.$router.push("/home");
        }, 1000);
      } catch (e) {
        console.log("eee",e)
        this.$toast.error(e.response.data.msg);
      } finally {
        setTimeout((_) => {
          this.$loading.close();
        }, 500);
      }
    },
    closeModal() {
      this.showQRcode = false;
      this.$router.replace("/");
    },
  },
};
</script>
<style lang="less" scoped>
.create-business {
  .form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow-y: auto;
    .label {
      display: flex;
      align-items: flex-start;

      span {
        font-size: @large;
      }
      .input {
        color: #ccc;
        border: none;
        outline: none;
        width: 100%;
      }

      .required {
        color: red;
        font-size: @md;
        margin-top: -3px;
      }
    }
    .input {
      &::placeholder {
        color: #ccc;
      }
      color: #333;
      border: none;
      outline: none;
      width: 100%;
    }

    .reset {
      font-size: @mini;
      color: @theme-color;
      border: 1px solid @theme-color;
      border-radius: 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 0.25rem;
      width: 0.55rem;
    }
  }

  .showQRCode-modal {
    background-color: transparent;
    .showQRCode {
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: transparent;
      .img-group {
        background-color: #fff;
        width: 252px;
        height: 252px;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          width: 230px;
          height: 230px;
        }
      }

      i {
        margin-top: 30px;
        color: #ccc;
        font-size: 34px;
      }
    }
  }
}
</style>
